import React from 'react';
import { connect } from 'dva';
import { Icon, Checkbox,List,Divider,Tooltip, Switch } from 'antd';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 10 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
};

@connect(({ graphics }) => ({ graphics }))
class GraphicsElement extends React.Component {
  ListConf = [
    { key: 'y1', value: '标题' },
    { key: 'y2', value: '比例尺' },
    { key: 'y3', value: '指北针',flag: true,desc: '1.点击指北针图标地图恢复正北方向  2.按下Shift + Alt 键，同时拖拽地图即可旋转'},
    { key: 'y4', value: '图例' },
  ]

  onYuansuChange = (checked,e) => {
    console.log('checked = ', e.target ? e.target.value: '');
    var y1 = document.getElementById('showInput');
    var y2 = document.getElementsByClassName('ol-scale-line');
    var y3 = document.getElementsByClassName('ol-rotate');
    var y4 = document.getElementsByClassName('ol-legend');
    if(checked==true) {
      switch(e.target.value)
      {
        case 'y1':
          y1.style.visibility = 'visible';
          document.getElementById('titleId').value = '';
          break;
        case 'y2':
          y2[0].style.display = 'block'
          break;
        case 'y3':
          y3[0].style.display = 'block'
          break;
        case 'y4':
          y4[0].style.display = 'block'
          break;
        default:
          break;
      }
    }else {
      switch(e.target.value)
      {
        case 'y1':
          y1.style.visibility = 'hidden'
          break;
        case 'y2':
          y2[0].style.display = 'none'
          break;
        case 'y3':
          y3[0].style.display = 'none'
          break;
        case 'y4':
          y4[0].style.display = 'none'
          break;
        default:
          break;
      }
    }
  };

  componentDidMount() {
    // this.init();
  }

  render() {
    const { ListConf } = this;
    return (<>
        {/* <h3>元素列表:</h3> */}
        <List
            style={{ }}
            dataSource={ListConf}
            split={false}
            renderItem={item => (
            <List.Item>
              <span style={{width: '80%'}}>{item.value || ''} {item.flag ? <Tooltip placement="top" title={item.desc}><Icon type="info-circle" /></Tooltip>: ''}</span>
                <Switch size="small" onChange={this.onYuansuChange} value={item.key || ''} />
                {/* <Checkbox onChange={this.onYuansuChange} value={item.key || ''}>
                {item.value || ''} {item.flag ? <Tooltip placement="top" title={item.desc}><Icon type="info-circle" /></Tooltip>: ''}
                </Checkbox> */}
            </List.Item>
            )}
        />
        {/*  <h3 style={{ margin: '18px 0px' }}>当前元素属性设置：</h3>*/}
        {/*  <Form {...formItemLayout}>*/}
        {/*    <Form.Item label="位置横坐标">*/}
        {/*      {' '}*/}
        {/*      <Input style={{ width: '60%' }} />*/}
        {/*      {' mm'}*/}
        {/*    </Form.Item>*/}
        {/*    <Form.Item label="位置纵坐标">*/}
        {/*      {' '}*/}
        {/*      <Input style={{ width: '60%' }} />*/}
        {/*      {' mm'}*/}
        {/*    </Form.Item>*/}
        {/*    <Form.Item label="宽度">*/}
        {/*      {' '}*/}
        {/*      <Input style={{ width: '60%' }} />*/}
        {/*      {' mm'}*/}
        {/*    </Form.Item>*/}
        {/*    <Form.Item label="高度">*/}
        {/*      {' '}*/}
        {/*      <Input style={{ width: '60%' }} />*/}
        {/*      {' mm'}*/}
        {/*    </Form.Item>*/}
        {/*  </Form>*/}
        {/*</div>*/}
        {/* <Divider dashed /> */}
    </>
    );
  }
}

export default GraphicsElement;
